문헌 열람실 > LLM 비용 및 회원 관리 대시보드 프로젝트
Y

descriptionLLM 비용 및 회원 관리 대시보드 프로젝트

folderRoot

#YCLM #Supabase #Langfuse #Replit #LLM-Cost #2025

프로젝트 명 제안 및 시작 안내

안녕하세요. 먼저, 프로젝트 이름을 제안해 드리겠습니다. 제공하신 설명을 바탕으로, Supabase를 통해 회원 관리와 LLM 사용량 추적을 통합하고, Langfuse로 비용 모니터링을 하며, Replit의 AI Design Mode를 활용해 시각적 대시보드(버튼 조작 중심)로 관리하는 구조를 고려했습니다. 영상 기준(2025. 12. 3. Build an n8n Workflow Monitoring Dashboard with Replit’s NEW AI Design Mode)을 따르되, n8n 워크플로우 모니터링을 LLM 비용 추적과 회원 관리로 확장하는 방향으로 맞췄습니다.

제안 프로젝트 명: "YC Brain Lab Monitor (YCLM)"

  • 이유: "YC Brain Lab"은 영천브레인 연구소의 핵심을 담아 브랜딩이 쉽고, "Monitor"는 Supabase(회원 관리), Langfuse(LLM 비용 추적), Replit(시각적 대시보드 모니터링)을 포괄합니다. 간결하면서도 확장 가능합니다. (만약 더 구체적으로 원하시면 "YCLM: LLM Cost Guardian"처럼 변형 가능합니다.)
  • 관리 팁: 이 이름을 사용해 Obsidian에서 새 노트 파일을 만들고, 아래 마크다운 내용을 복사해 붙여넣으세요.

이 프로젝트는 "너무 한꺼번에" 느껴질 수 있지만, 영상처럼 Replit의 AI 에이전트가 80%를 자동화해 주기 때문에 단계별로 쪼개서 진행하면 부담이 적습니다. 시각적 위주(버튼 클릭, 그래프, 알림 팝업)로 설계해 대시보드를 "잘 안 보게 되는" 문제를 피하겠습니다. 아래 마크다운은 전체 프로젝트를 구조화한 문서입니다. 각 섹션에 단계별 안내와 영상 기준의 Replit/Supabase 통합을 반영했습니다. 잘 정리해 두시면 나중에 복습할 때 잊지 않으실 거예요.

YC Brain Lab Monitor (YCLM) - LLM 비용 및 회원 관리 대시보드 프로젝트

프로젝트 개요
이 프로젝트는 영천브레인(YC Brain Lab) 연구소에서 여러 팀원이 사용하는 LLM 도구의 사용량과 비용을 실시간 추적하며, Supabase로 회원 관리를 통합합니다. Replit의 AI Design Mode를 활용해 n8n 워크플로우 모니터링 영상을 기반으로 시각적 대시보드를 만듭니다. 핵심:

  • Supabase: 회원 로그인/가입, 사용자별 데이터 분리 (Row Level Security 사용).
  • Langfuse: LLM 호출(토큰, 비용) 로그 수집 및 Supabase 연동.
  • Replit: AI로 대시보드 UI 생성 (버튼 중심: "비용 조회", "사용자 필터", "알림 설정" 등).
  • n8n 통합: 워크플로우에서 Langfuse 로그를 Supabase로 자동 푸시.

목표: 연구소 홈페이지에 로그인만 하면 팀원들이 자기 데이터만 보고, 관리자는 전체 비용(팀별/LLM 종류별)을 버튼 하나로 확인. 영상처럼 Supabase 스키마 스크린샷으로 UI 자동 생성.
예상 시간: 초기 설정 2-3시간 (Replit AI가 대부분 처리). 유지보수: 주 10분 (대시보드 클릭만).
필요 도구: 로컬 Supabase (이미 ngrok으로 외부 노출됨), Langfuse (trace.ycbrain.ngrok.app), Replit 계정, n8n 워크플로우.

주의: 모든 단계는 영상 기준(Replit Design Mode + Supabase 연동)을 따릅니다. 시각적 요소(버튼, 그래프)를 강조해 "대시보드 안 보는" 문제를 해결합니다.

1. 프로젝트 준비 및 Supabase 설정 (회원 관리 기반 마련)

단계별 안내

  1. Supabase 스튜디오 열기: https://supabase-ycbrain.ngrok.app에 접속해 로그인하세요. (이미 설정된 DASHBOARD_USERNAME/PASSWORD 사용.)
  2. 회원 관리 테이블 생성: SQL Editor에서 아래 쿼리 실행. (영상처럼 스키마 확장: n8n 로그 테이블에 사용자 ID 추가.)
    • 테이블: users (회원 정보), llm_logs (Langfuse 연동 로그).
  3. Auth 활성화: 왼쪽 메뉴 > Authentication > Settings > Email 활성화. Site URL을 https://supabase-ycbrain.ngrok.app로 설정. (영상 14:04 인증 추천 부분 기반.)
  4. RLS 정책 설정: 사용자별 데이터 분리. 예: 마케팅팀만 자기 로그 보기.
  5. 테스트: 새 사용자 가입/로그인 테스트. 성공 시 스키마 스크린샷 캡처 (영상 3:11처럼 Replit에 드래그할 준비).

필요한 쿼리 예시 (SQL Editor에 복사/실행)

-- users 테이블 (회원 관리)
CREATE TABLE users (
  id UUID PRIMARY KEY REFERENCES auth.users(id),
  email TEXT UNIQUE NOT NULL,
  team TEXT NOT NULL,  -- e.g., '마케팅팀'
  created_at TIMESTAMP DEFAULT NOW()
);

-- llm_logs 테이블 (LLM 비용 추적, Langfuse 연동)
CREATE TABLE llm_logs (
  id SERIAL PRIMARY KEY,
  user_id UUID REFERENCES users(id),
  workflow_name TEXT,  -- n8n 워크플로우 이름
  llm_model TEXT,  -- e.g., 'gpt-4o'
  tokens_input INTEGER,
  tokens_output INTEGER,
  cost_usd DECIMAL(10,4),  -- 비용 (달러)
  timestamp TIMESTAMP DEFAULT NOW(),
  status TEXT  -- 성공/실패
);

-- RLS 정책 (사용자별 데이터 분리)
ALTER TABLE llm_logs ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Users can view own logs" ON llm_logs
  FOR SELECT USING (auth.uid() = user_id);

변경 요약: 이 테이블은 영상 n8n 로그 테이블을 확장한 버전입니다. Langfuse에서 자동 푸시될 데이터 구조로, 비용 필드를 추가해 추적 가능. 에러 방지: RLS로 보안 강화.

2. Langfuse 설정 (LLM 사용량 및 비용 추적)

단계별 안내

  1. Langfuse 대시보드 열기: https://trace.ycbrain.ngrok.app 접속 (기본 로그인: [email protected] / changeme).
  2. 프로젝트 생성: Settings > Projects에서 팀별 프로젝트 만들기 (e.g., "마케팅팀-LLM", "영업팀-LLM").
  3. n8n 워크플로우 연동: n8n에서 LLM 노드(예: OpenAI)에 Langfuse 래퍼 추가. 로그를 Supabase llm_logs 테이블로 푸시.
  4. 비용 계산 활성화: Langfuse Settings > Billing에서 OpenAI/Claude API 키 등록 (자동 토큰 → 달러 변환).
  5. 테스트: n8n에서 샘플 LLM 호출 → Langfuse 로그 확인 → Supabase에 자동 INSERT 되는지 검증.

필요한 n8n 노드 코드 예시 (n8n 워크플로우 에디터에 추가)

// Langfuse 래퍼 (n8n Code 노드에 넣기)
const { Langfuse } = require('langfuse');
const langfuse = new Langfuse({
  publicKey: 'pk-lf-...',  // trace.ycbrain.ngrok.app에서 복사
  secretKey: 'sk-lf-...',
  host: 'https://trace.ycbrain.ngrok.app'
});

const trace = langfuse.trace({
  name: '{{ $json.workflow_name }}',  // n8n 변수
  userId: '{{ $json.user_id }}'  // Supabase 로그인 ID
});

// LLM 호출 후
const response = await openai.chat.completions.create(...);  // 기존 n8n OpenAI 노드
trace.update({ output: response.choices[0].message.content });

// Supabase에 로그 푸시 (n8n Supabase 노드)
return {
  user_id: '{{ $json.user_id }}',
  llm_model: 'gpt-4o',
  tokens_input: response.usage.prompt_tokens,
  tokens_output: response.usage.completion_tokens,
  cost_usd: (response.usage.total_tokens * 0.00002).toFixed(4)  // 예시 비용 계산
};

변경 요약: n8n에서 Langfuse를 감싸 비용을 자동 계산하고 Supabase로 푸시. 에러 원인(로그 누락): user_id 미설정 → Supabase Auth 연동으로 해결. 이제 팀별/LLM 종류별(모델 필터) 비용 확인 가능.

3. Replit 대시보드 빌드 (시각적 모니터링, 영상 기준)

단계별 안내

영상 전체를 기반으로: Supabase 스키마 스크린샷 → Design Mode → 연결 → 배포. 시각적 위주로 버튼/그래프 강조. (너무 한꺼번이 아니에요 – AI가 99% 자동화.)

  1. Replit 열기: 새 프로젝트 생성 > Design Beta 모드 선택.
  2. 스키마 업로드: Supabase llm_logs + users 테이블 스크린샷 드래그. 프롬프트: "N8N 워크플로우와 LLM 비용을 모니터링하는 포털 디자인. 버튼으로 팀 필터, 비용 그래프, 사용자 목록 표시." (영상 3:11 기반.)
  3. 디자인 세밀 조정: Fast Mode로 "버튼 추가: '비용 알림 설정', 'LLM 모델 필터'" 프롬프트 (영상 2:45 Fast Mode).
  4. Supabase 연결: "Supabase 라이브러리로 연결" 프롬프트 > URL (https://supabase-ycbrain.ngrok.app), anon key 입력 (영상 10:00).
  5. Auth 통합: "Supabase Auth로 로그인 추가" 프롬프트 (영상 14:04 추천).
  6. 에러 핸들링: 데이터 안 보이면 스크린샷 + "데이터 로드 안 됨" 프롬프트 (영상 11:52).
  7. 배포: Publish 클릭 > 커스텀 도메인 연결 (e.g., monitor.ycbrain.com) (영상 14:31).

Replit 프롬프트 예시 (Design Mode에 입력)

Supabase에 users와 llm_logs 테이블이 있어요 (첨부 스크린샷). N8N 워크플로우 모니터링 포털 디자인: 
- 로그인 버튼 (Supabase Auth).
- 대시보드: 팀별 비용 그래프 (버튼 클릭으로 필터).
- LLM 종류별 비용 테이블 (버튼: '상세 보기').
- 알림 버튼: "이번 달 50만원 초과 시 이메일".
목 데이터로 미리 보여주세요.

변경 요약: 영상 n8n 모니터링을 LLM 비용으로 확장. 에러 원인(연결 실패): ngrok URL 미사용 → https://supabase-ycbrain.ngrok.app로 수정. 시각적: 버튼/그래프로 "안 보는" 문제 해결.

4. 통합 테스트 및 유지보수

단계별 안내

  1. 전체 테스트: 홈페이지에서 로그인 > 대시보드 접근 > n8n 호출 > Langfuse 로그 > Replit 그래프 업데이트 확인.
  2. 비용 확인: Replit 대시보드에서 "팀별 비용" 버튼 클릭 → Langfuse 데이터 실시간 반영.
  3. 오픈 준비: 팀원에게 홈페이지 URL 공유 (로그인 필수). 관리자: Replit에서 "전체 비용" 버튼으로 월별 리포트.
  4. 유지보수: n8n 웹훅으로 자동 로그 푸시. Replit Fast Mode로 UI 업데이트 (영상 12:17 팁).

모니터링 예시 (Replit 대시보드에서 볼 화면)

  • 버튼 1: "마케팅팀 필터" → 그래프: gpt-4o 210k원, claude-3.5 98k원.
  • 버튼 2: "전체 비용" → 이번 달 총 427k원 (팀별 파이 차트).
  • 버튼 3: "알림 설정" → 50만원 초과 시 Supabase 이메일 트리거.

변경 요약: 영상 배포를 기반으로 Langfuse 푸시 추가. 에러 원인(데이터 동기화 지연): n8n 웹훅으로 실시간화.

5. 다음 단계 및 팁

  • 확장 아이디어: Replit에 "비용 초과 시 n8n 자동 정지" 워크플로우 추가.
  • 잊지 않기: Obsidian에서 이 문서 태그로 연결. 매주 Replit 대시보드 5분 체크.
  • 문제 발생 시: Supabase 로그 확인 > Replit Fast Mode로 수정 (영상처럼 AI가 99% 해결).

이 문서로 프로젝트를 체계적으로 관리하시면, 나중에 복습할 때 편할 거예요. 추가 질문(예: 특정 단계 세부 코드)이 있으시면 언제든 말씀해 주세요. 함께 완성해 나가요!